<template>
    <div class="common-layout">
        <el-container>
            <el-header style="border: groove; border-width: 2px; height: 150px; width: 100%; margin-top: 10px;">
                <div
                    style="display: flex; align-items: center; background-color: #f5f7fa; padding: 10px; border: 1px solid #e4e7ed; border-radius: 4px; margin-bottom: 10px;">
                    <el-icon style="margin-right: 8px; color: #666;">
                        <Filter />
                    </el-icon>
                    <span>筛选</span>
                </div>
                <el-form :inline="true" class="demo-form-inline" style="margin-top: 15px;">
                    <el-form-item label="标题：">
                        <el-input placeholder="输入标题或关键字" clearable style="width: 150px;" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="">筛选</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main style="border: groove; border-width: 2px; height: 700px; width: 100%; margin-top: 20px; ">
                <div
                    style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; background-color: #f5f7fa; padding: 10px; border: 1px solid #e4e7ed; border-radius: 4px;">
                    <span>医院列表</span>
                    <el-button type="primary" @click="setting">新增医院</el-button>
                </div>
                <el-table :data="hospdata" border style="width: 1000px;margin-top: 25px;">
                    <el-table-column type="selection" align="center" />
                    <el-table-column prop="name" label="医院名称" align="center" />
                    <el-table-column prop="hospitalImg" label="列表图" align="center">
                        <template v-slot="scoped">
                            <img :src="scoped.row.hospitalImg" style="width: 100px; height: 100px;" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="head" label="医院等级" align="center" />
                    <el-table-column prop="hospitalPhone" label="医院电话" align="center" />

                    <el-table-column prop="createName" label="上传人" align="center" width="80" />
                    <el-table-column prop="createTime" label="上传时间" align="center" width="180">
                        <template v-slot="scoped">
                            {{ scoped.row.createTime == null ? '暂无数据' : scoped.row.createTime.slice(0, 19).replace('T',
                                ' ') }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template v-slot="scoped">
                            <el-button type="danger" @click="open(scoped.row.hospitalId)" link>
                                删除
                            </el-button>
                            <!-- <el-button type=" primary" @click="Upd(scoped.row.hospitalId)" link>
                                修改
                            </el-button> -->
                            <el-button type=" primary" @click="setatt(scoped.row.hospitalId)" link>
                                详情页面
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <div style="display: flex; justify-content: center; margin-top: 30px;">
                    <el-pagination v-model:current-page="page.Pagindex" v-model:page-size="page.Pagsize"
                        :page-sizes="[100, 200, 300, 400]" :background="true"
                        layout="total, sizes, prev, pager, next, jumper" :total="page.totalcount" />
                </div>
            </el-main>
        </el-container>
    </div>

</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { Filter, RefreshRight } from '@element-plus/icons-vue'
import { Read, Write } from '@/Http/Axios'
import { ElMessage, ElMessageBox, type UploadProps } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/counter'
import router from '@/router'

const store = useCounterStore()

//分页参数
const page = reactive({
    Pagindex: 1,
    Pagsize: 4,
    totalcount: 0,
    totalpage: 1,
})
//查询参数
const query = reactive({
    Name: "",
    HospitalAddTow: "",

})
const hospdata = ref([
    {
        "hospitalId": 1,
        "name": "1",
        "hospitalImg": "",
        "isHospital": true,
        "hospitalCount": 1,
        "hospitalCountTow": 1,
        "hospitalAdd": "1",
        "hospitalAddTow": "1",
        "hospitalPhone": "1",
        "departments": [],
        "intro": "1",
        "createName": "1",
        "createTime": "2025-10-31T16:54:49",
        "isDeleted": false,
        "head": "三甲"
    }
])
const hosplist = () => {
    Read.get("/HospitalShow", {
        params: {
            Pagindex: page.Pagindex,
            Pagsize: page.Pagsize,
            Name: query.Name,
            HospitalAddTow: query.HospitalAddTow,
        }
    }).then(res => {
        hospdata.value = res.data.data.fdata
        page.totalcount = res.data.totalCount
        page.totalpage = res.data.totalPage
    })
}

//添加跳转页面
const setting = () => {
    router.push({
        path: '/AddhospView',
    })
}
//修改跳转页面
const Upd = (t: any) => {
    router.push({
        path: '/UpdateHospView',
        query: {
            hospitalId: t
        }
    })
}


//删除方法
const open = (t: any) => {
    ElMessageBox.confirm(
        '您确定要删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            Write.delete("/DeleteHospital", {
                data: {
                    hospitalId: t
                }
            }).then(res => {
                if (res.data.code == 400) {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    hosplist();
                }

            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消',
            })
        })
}

//详情页面跳转
const setatt = (t: any) => {
    router.push({
        path: '/QueryHospView',
        query: {
            hospitalId: t
        }
    })
}



//钩子函数
onMounted(() => {
    hosplist();
})
//侦听器
watch(page, () => {
    hosplist();
})



</script>